<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<script type="text/javascript">
  function refreshProductAttribute() {
    var id = $('#id').val();
    if ($.isNumeric(id)) {
      jQuery
          .ajax({
            url : '${pageContext.request.contextPath}/inventory/productAttribute/loadProductAttribute.action',
            dataType : 'json',
            async : false,
            cache : false,
            data : {
              'productAttribute.id' : $('#id').val()
            },
            success : function(data) {
              var sku = data.sku;
              var upc = data.upc;
              var productName = data.productName;
              var attributeName = data.attributeName;
              $('#productName').text(productName);
              $('#attributeName').text(attributeName);
              $('#sku').text(sku);
              if (upc) {
                $('#upc').text(upc);
              }
            }
          });
    }
  }

  $(function() {
    $('#viewProductItemButtonDiv').addClass('ui-dialog-buttonset');
    $('.submit-button').button();
    $('#productOkBtn').click(function(e) {
      e.preventDefault();
      $('#editProductItem').empty();
      $('#listProductItem').trigger('reloadGrid');
      $('#mainListProductItem').show();
    });
    $("#productItemAccordion").multipleaccordion();
    $('#productItemAccordion > div > table td.LABEL').css({
      'width' : '130px'
    });
    $('#product-item-view-dialog-form').wrap('<form id="product-item-view-form">');
    refreshProductAttribute();

    jQuery("#listProductItemPrice")
        .jqGrid(
            {
              url : '${pageContext.request.contextPath}/inventory/price/getProductItemPrices.action?productAttribute.id=${param["productAttribute.id"]}',
              datatype : "json",
              colNames : ['ID','version','<s:property value="getText(\'field.uom\')" />',
                  '<s:property value="getText(\'field.item.price\')" />'],
              colModel : [{
                name : 'id',
                index : 'id',
                editable : false,
                hidden : true,
                editrules : {
                  edithidden : false
                },
                width : 10
              },{
                name : 'version',
                index : 'version',
                hidden : true,
                width : 2
              },{
                name : 'measurement',
                index : 'uom',
                sortable : false,
                width : 150
              },{
                name : 'price',
                index : 'price',
                sortable : false,
                width : 200,
              }],
              jsonReader : {
                root : "rows",
                page : "page",
                total : "total",
                records : "records",
                repeatitems : false,
                id : "id",
                cell : "",
                userdata : ""
              },
              rowNum : 10,
              rowList : [10,20,30],
              pager : '#pagingProductItemPrice',
              sortname : 'uom',
              viewrecords : true,
              sortorder : "asc",
              multiselect : false,
              autowidth : true,
              height : 150,
              caption : "<s:property value='getText(\"title.list.product.item.price\")' />"
            }).navGrid('#pagingProductItemPrice',{
          edit : true,
          add : true,
          del : false,
          view : false,
          search : false,
          addfunc : function() {
            $('#productItemPriceEditDialog').load('inventory/price/addProductItemPrice.action',{
              'itemPrice.attributeId' : $('#id').val()
            });
          },
          editfunc : function(id) {
            $('#productItemPriceEditDialog').load('inventory/price/editProductItemPrice.action',{
              'itemPrice.id' : id
            });
          }
        });
  });
</script>
<div id="product-item-view-dialog-form"
  title='<s:property value="getText('title.view.product.attribute')"/>'>
  <div id="productItemAccordion">
    <h3>
      <s:property value="getText('title.product.item')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="sku"> <s:property
                value="getText('field.stock.keeping.unit')" /></label></td>
          <td><label id="sku"></label></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="upc"> <s:property
                value="getText('field.universal.product.code')" /></label></td>
          <td><label id="upc"></label></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="productName"><input type="hidden" id="id"
              name="productAttribute.id"
              value='<s:property value="%{#parameters[\"productAttribute.id\"]}" />' /> <s:property
                value="getText('field.product.name')" /></label></td>
          <td><label id="productName"></label></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="attributeName"> <s:property
                value="getText('field.product.attribute.name')" /></label></td>
          <td><label id="attributeName"></label></td>
        </tr>
      </table>
      <br />
      <div style="width: 750px;" id="mainProductItemPrice">
        <table id="listProductItemPrice"></table>
        <div id="pagingProductItemPrice"></div>
      </div>
      <br />
    </div>
    <div id="viewProductItemButtonDiv">
      <button id="productOkBtn" class="submit-button">
        <s:property value="getText('button.ok')" />
      </button>
    </div>
  </div>
</div>
<div id="productItemPriceEditDialog"></div>